<template>
  <div>
    <a-input-search v-model="searchvalue" @change="handleSearch" />
    <div class="icon-box">
      <div
        v-for="(item, index) in iconArr"
        :key="index"
        @click="handleClick(item)"
        class="icon-content"
        :style="{ background: icon === item ? '#a1d0fc' : '' }"
      >
        <a-icon :type="item" /> {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import iconArr from "@/assets/icons.json";

export default {
  name: "IconPicker",
  data() {
    return {
      icon: "",
      searchvalue: "",
      iconArr: iconArr,
      iconArrCoach: iconArr,
    };
  },
  methods: {
    handleSearch() {
      this.iconArr = this.iconArrCoach.filter((i) =>
        i.includes(this.searchvalue)
      );
    },
    handleClick(item) {
      this.icon = item;
      this.$emit("selectIcon", item);
    },
  },
};
</script>

<style lang="scss">
.icon-box {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  .icon-content {
    flex: 50%;
    font-size: 16px;
    cursor: pointer;
  }
}
</style>